<template>
	<view class="fl-s-c">
		<view class="relative fl-s-s" style="width: 746rpx; height: 418rpx; padding:58rpx;" v-for="(item,index) in list" :key="index">
			<image class="absolute-0 w-1 h-1" src="/static/images/tab4/card_bg.png" mode=""></image>
			<view class="w-1 fr-s-c relative">
				<!-- <image style="width: 82rpx; height: 82rpx;" class="m-r-20 circle" src="/static/logo.png" mode=""></image> -->
				<text class="c-ff fs-36 bold flex-1">{{item.bank_name}}</text>
				<view class="m-l-30" @click="delCard(item,index)">
					<u-icon name="trash" size="50rpx"  color="#ffffff"></u-icon>
				</view>
			</view>
			<view class="w-1 fr-s-s c-ff fs-28 m-t-15 relative">
				<view class="w-5 fl-s-s">
					<text class="">持卡人</text>
					<text class="m-t-20 text-line-1">{{formatname(item.name)}}</text>
				</view>
				<view class="w-5 fl-s-s">
					<text class="">银行预留手机号</text>
					<text class="m-t-20 text-line-1">{{phoneStar(item.mobile)}}</text>
				</view>
			</view>
			<text class="c-ff fs-28 m-t-15 relative">银行卡号</text>
			<text class="c-ff fs-28 m-t-15 relative">{{cardStar(item.account)}}</text>
		</view>
		<view class="add-box fl-c" :class="list.length?'':'m-t-30'" @click="$u.route('/pagemaster/pages/User/addcard')">
			<u-icon name="plus-circle-fill" size="50rpx" color="#01796D"></u-icon>
			<text class="c-main fs-32 m-t-5">添加银行卡</text>
		</view>
	</view>
</template>

<script>
	import {cardStar,phoneStar} from '@/utils/util.js'
	export default {
		data() {
			return {
				path: this.$path,
				could:false,
				list:[],
				nodata:false
			}
		},
		onLoad() {
			this.getlist()
		},
		onPullDownRefresh() {
			this.getlist()
		},
		onShow() {
			this.getlist(false)
		},
		methods: {
			cardStar,
			phoneStar,
			formatname(val){
				let star = ''
				for(let i = 0; i<(val.length-1); i++){
					star+='*'
				}
				return val[0]+star
			},
			delCard(item,index){
				uni.$post({
					url:'/api/center/deletemybanklit',
					data:{
						aid:item.id
					}
				}).then(res=>{
					this.list.splice(index,1)
					this.nodata = !this.list.length;
				})
			},
			getlist(loading=true){
				uni.$post({
					url:'/api/center/pmbankcard',
					loading
				}).then(res=>{
					this.list = res.data;
					this.nodata = !this.list.length;
				})
			},
			clickTab(item) {
				this.curtab = item.index;
			},
			toRichText() {
				uni.navigateTo({
					url: '/pagemaster/pages/RichText/RichText'
				})
			},
			changeDate(e) {
				console.log(e.detail.value)
				this.date = e.detail.value;
			},
		
		}
	}
</script>

<style>
	page {
		background: #f1f5f6;
	}
	
	.add-box{
		width: 686rpx;
		height: 158rpx;
		box-shadow: 0rpx 0rpx 20rpx 2rpx rgba(203,203,203,0.18);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 2rpx dashed #01796D;
	}
</style>